<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/style-user.css">
    <script src="layui/layui.js"></script>
    <script src="js/jquery-1.8.3.js"></script>
</head>
<body>
    <div style="margin-bottom: 10px;">
        <div class="layui-btn" id="addFirst">添加一级类别</div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div class="layui-btn" id="addSecond">添加二级类别</div>
    </div>
    <form class="layui-form" id="addFirstForm" style="display: none;padding: 5px 20px 0px 0px">
        <div class="layui-form-item">
            <label class="layui-form-label">类别名称</label>
            <div class="layui-input-block">
                <input type="text" name="categoryName" placeholder="请输入" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-input-inline login-btn">
            <button lay-submit lay-filter="add1" class="layui-btn">添加</button>
        </div>
        <div class="layui-btn"  onclick="history.go(-1);">返回上级</div>
    </form>

    <form class="layui-form" id="addSecondForm" style="display: none;padding: 5px 20px 0px 0px">

        <div class="layui-form-item">
            <label class="layui-form-label">所属一级类别</label>
            <div class="layui-input-block">
                <select name="parent.categoryId" id="sss">
                    <option>请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">二级类别名称</label>
            <div class="layui-input-block">
                <input type="text" name="categoryName" placeholder="请输入" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-input-inline login-btn">
            <button lay-submit lay-filter="add2" class="layui-btn">添加</button>
        </div>
        <div class="layui-btn"  onclick="history.go(-1);">返回上级</div>
    </form>


    <table id="category" lay-filter="tableFilter"></table>
    <script type="text/html" id="bar">
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
    <script>
        layui.use(['table','layer','form'],function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$;
            //渲染表格
            table.render({
                elem:'#category',
                url:'category/selectAllCategory',
                cols:[[
                    {field:'categoryId',title:'编号',sort:true},
                    {field:'categoryName',title:'类别名称',sort:true},
                    {field:'parent.categoryName',title:'所属类别',sort:true},
                    {field:'levels',title:'级别',sort:true},
                    {title:'操作',toolbar:'#bar'}
                ]]
            })
            //给删除操作绑定触发事件   tool行工具条被点击
            table.on('tool(tableFilter)',function (obj) {
                console.log(obj);
                if(obj.event=='del'){
                    //删除操作
                    layer.confirm('确定要删除吗？',function(index) {
                        $.ajax({
                            url:'category/removeCategory',
                            data:'id='+obj.data.categoryId,
                            success:function (result) {
                                if(result.flag){
                                    layer.msg('删除成功');
                                    table.reload('category')
                                }
                            }
                        })
                        layer.close(index);
                    })
                }
            })

            //添加一级类别
            $('#addFirst').click(function () {
                layer.open({
                    type:1,
                    title:'添加一级类别',
                    area:'500px',
                    content:$('#addFirstForm')
                })
            })
            form.on('submit(add1)',function () {
                $.ajax({
                    url:'category/addCategory',
                    data:$('#addFirstForm').serialize(),
                    success:function (result) {
                        if(result.flag){
                            layer.msg('添加成功');
                            layer.closeAll();
                            table.reload('category')
                        }
                    }
                })
                return false;//阻止表单自动提交

            })
            //添加二级类别
            $('#addSecond').click(function () {
                layer.open({
                    type:1,
                    title:'添加二级类别',
                    area:'500px',
                    content:$('#addSecondForm')
                })
                //加载所有的一级类别
                $.ajax({
                    url:'category/selectFirstCategory',
                    success:function (result) {
                        // console.log(result);
                        var list = result.list;
                        // console.log(list);
                        var s = '';
                        $(list).each(function (i,obj) {
                            s+='<option value="'+obj.categoryId+'">'+obj.categoryName+'</option>>'
                        })
                        $('#sss').html(s);
                        //刷新下拉框  因为下拉框数据是动态更新的
                        form.render('select');
                    }
                })
            })
            form.on('submit(add2)',function () {
                $.ajax({
                    url:'category/addCategory',
                    data:$('#addSecondForm').serialize(),
                    success:function (result) {
                        if(result.flag){
                            layer.msg('添加成功');
                            layer.closeAll();
                            table.reload('category')
                        }
                    }
                })
                return false;//阻止表单自动提交
            })

        })
    </script>
</body>
</html>